PIG AI APP 使用

PIGX AI App 是基于 uni-app 框架开发的 PIG AI 移动端应用,支持微信小程序平台,集成了完整的 AI 能力与企业级功能,适用于快速构建高性能、跨平台的智能应用。

技术栈概览

核心依赖

类别技术/库版本
跨端框架uni-app3.0.0-4060620250520001
前端框架Vue 3(Composition API)~3.4.38
编程语言TypeScript~5.5.4
构建工具Vite^5.2.8
UI 组件库Wot Design Uni^1.13.0
原子化 CSSUnoCSS^0.62.3
状态管理Pinia^2.3.1
路由系统uni-mini-router^0.1.6
布局系统@uni-helper/uni-layouts^0.1.11
请求库Alova^3.3.4

环境要求

请确保本地开发环境满足以下最低要求:

工具版本要求
Node.js≥ 22
pnpm9.9.0
微信开发者工具最新稳定版(建议保持更新)
包管理器推荐

推荐使用 pnpm 作为包管理器,以获得更快的安装速度和更优的磁盘空间利用。

快速开始

1. 克隆项目代码

git clone https://git.pig4cloud.com/pig/pigx-ai-app.git
cd pigx-ai-app

2. 安装依赖并启动开发模式

# 安装依赖(使用 pnpm)
pnpm install

# 启动微信小程序开发模式
pnpm dev:mp-weixin

构建完成后,输出目录为 dist/dev/mp-weixin

3. 导入微信开发者工具

  1. 打开 微信开发者工具
  2. 点击「+」新建项目,选择目录:dist/dev/mp-weixin
  3. 填写 AppID(如无正式账号,可使用测试号
  4. 点击"确定",即可预览和调试小程序
配置注意事项

首次使用需在 PIGX UI 中配置正确的 AppIDAppSecret

开发者工具配置示意图

项目结构说明

pigx-ai-app/
├── src/
│   ├── api/                 # 自动生成的 API 接口定义
│   ├── components/          # 全局通用组件
│   ├── composables/         # 可复用的组合式函数(Vue 3 Composition API)
│   ├── constants/           # 全局常量(如枚举、配置项)
│   ├── layouts/             # 页面布局模板
│   │   ├── default.vue      # 默认布局(无底部导航)
│   │   └── tabbar.vue       # 带底部 TabBar 的布局
│   ├── pages/               # 所有页面组件(按路由自动映射)
│   ├── router/              # 路由相关逻辑(基于 uni-mini-router)
│   ├── static/              # 静态资源(图片、字体等)
│   ├── store/               # Pinia 状态管理模块
│   ├── styles/              # 全局样式与主题变量
│   ├── subEcharts/          # ECharts 图表分包(按需加载)
│   ├── types/               # TypeScript 类型定义文件
│   ├── utils/               # 工具函数集合(日期处理、校验等)
│   ├── App.vue              # 应用根组件
│   └── main.ts              # 应用入口文件
├── .env                     # 基础环境变量
├── .env.development         # 开发环境专用变量
├── .env.production          # 生产环境专用变量
├── alova.config.ts          # Alova 请求库全局配置
├── manifest.config.ts       # uni-app 小程序 manifest 配置(含 appId 等)
├── pages.config.ts          # 页面路由注册配置
├── theme.json               # 主题色与设计规范配置
├── uno.config.ts            # UnoCSS 原子化样式配置
├── vite.config.ts           # Vite 构建配置
├── package.json             # 项目元信息与脚本命令
└── README.md                # 项目说明文档